<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
	<meta name="renderer" content="webkit">

	<title>一个页面</title>
	<meta name="keywords" content="关键词">
	<meta name="description" content="简介">
	<link href="/statics/css/pure.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="static/css/animate.css">
	<link href="/statics/css/v1.css" rel="stylesheet">
	<link href="/statics/css/index.css" rel="stylesheet">
	<link href="/statics/css/document.css" rel="stylesheet">

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
	<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header class="header"><!--  header-fill header-small -->
	<div class="header-wrap clearfix">
		<div id="header-brand"><a href="#"><img src="/statics/images/logo.png"><h1>东莞市飞健实业有限公司</h1></a></div>
		<nav id="header-nav">

			<ul class="navbar clearfix">
				<li class="navli"><a href="index.html">首页</a></li>
				<li class="navli">
					<a href="index.html">服务</a>

					<div class="sub-nav">
						<div class="sub-triangle"><span></span></div>
						<div class="sub-text"><span>用心做最好的</span></div>
					</div>

				</li>
				<li class="navli"><a href="index.html">案例</a>
					<div class="sub-nav">
						<div class="sub-triangle"><span></span></div>
						<div class="sub-text"><span>用心做最好的222</span></div>
					</div>
				</li>
				<li class="navli"><a href="index.html">咨询控制</a></li>
			</ul>
			<ul class="navbar"></ul>
			
		</nav>



		<div id="header-menu" class="header-right">

			<ul class="navbar clearfix">
				<li><a href="index.html">控制台</a></li>
				<li><a href="index.html">控制台</a></li>
			</ul>

		</div>
	</div>
</header>


<div id="web-header" style="background:url(../statics/images/s1.jpg) no-repeat top center;">
	
</div>

<section id="web-path" class="container">
	<ol class="breadcrumb">
	  <li><a href="#">首页</a></li>
	  <li><a href="#">文章</a></li>
	  <li class="active">内容</li>
	</ol>
</section>
<!-- <div id="web-main"></div> -->
<div id="document-body">
	<section id="item-detail">
		<div class="wrap container pure-g">
			<div class="pure-u-2-5">
				<section id="item-thumb" class="text-center">
					<div class="thumb">
						<img src="http://down.admin5.com/demo/code_pop/20/89/images/shangpinxiangqing/X1.png">
					</div>
					<div class="list">123</div>
				</section>
			</div>
			<div class="pure-u-3-5">
				<section id="item-intro">
					<div class="title"><h1>红米Note 5A 高配版</h1></div>
					<p class="description"><font color="#ff4a00">【64GB版本 赠小米插线板+小米方盒子蓝牙音箱+米粉卡(最高含100元话费)+花呗6期+小米12期分期免息】</font>6.44''大屏 / 5300mAh 充电宝级的大电量 / 大像素相机 / 轻薄全金属  / ​4GB 大内存 / 骁龙八核处理器</p>
					<span class="price">1900元</span>
				</section>
			</div>
		</div>
	</section>
	<div class="container pure-g">

		<div class="pure-u-2-5 pure-u-md-1-1 pure-u-lg-7-24">
		
			<div id="document-aside">

				<section id="article-keyword">
					<div class="title"><h5>关于:发发撒大苏打撒旦撒的关键词</h5></div>
					<ul class="keyword">
						<li><a href="#">网站建设</a></li>
						<li><a href="#">SEO优化</a></li>
						<li><a href="#">网站测试</a></li>
						<li><a href="#">产品测试</a></li>
						<li><a href="#">标签例子</a></li>
					</ul>
				</section>


				<section class="aside-block">优惠码</section>
			</div>

		</div>


		<div class="pure-u-3-5 pure-u-md-1-1 pure-u-lg-17-24">
		<div id="document-wrap" class="break-r">

			<section id="document-nav">
				<ul class="tm-clear">
					<li class="on"><a href="#">产品详情</a></li>
					<li><a href="#">产品评论</a></li>
					<li><a href="#">咨询</a></li>
				</ul>
			</section>
			<section id="document-intro">
				<ul class="tm-clear">
					<li title="一篇读罢头飞雪,重读马克思">产品名称：一篇读罢头飞雪,重读马克...</li>
					<li title="&nbsp;否">是否是套装:&nbsp;否</li>
					<li title="&nbsp;一篇读罢头飞雪,重读马克思">书名:&nbsp;一篇读罢头飞雪,重读马克思</li>
					<li title="&nbsp;49.00元">定价:&nbsp;49.00元</li>
					<li title="&nbsp;中信出版社">出版社名称:&nbsp;中信出版社</li>
					<li title="&nbsp;一篇读罢头飞雪,重读马克思">书名:&nbsp;一篇读罢头飞雪,重读马克思</li>
					<li title="&nbsp;9787508642871">ISBN编号:&nbsp;9787508642871</li>
				</ul>
			</section>

			<article class="article-main">
				<section id="title"><h1>这是我们的标题</h1></section>
				<section id="info">
					<span>作者：原创</span>
					<span>时间：<time>2016-08-18 20时</time></span>
				</section>
				<section id="description">元素表示一个页面的一部分， 它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关……</section>
				<section id="content">

<p><br><strong>html5中article标签的讲解</strong><br><br></p>标签是用来定义一些来自外部的内容。比如一些网友的投稿或是新闻记者的文章或是摘取某博客、论坛的信息，以及其他媒介资料。<br><br>用户看到的内容并不是对应本网站的一个具体的页面，是可以嵌套使用的，内外层内容相关联<br><br>示例代码：<br><p></p>
<pre class="brush:html;toolbar:false">HTML5&nbsp;项目HTML5是用于修正现在html的下一个网页规范HTML5是万维网结构方面的标准</pre>
<p><br></p>标签支持HTML5中新的标准属性。<br><br>class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title<br><br>标签支持事件属性。<br><br>onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload<br><p></p>

                <p>以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索结构
                    ，                标签
                    ，                代码
                                    属性
                                    article aside、aside标签、html aside标签、aside标签有什么用、html5 aside标签，以便于您获取更多的相关知识。
                </p>



				</section>
			</article>
			<div id="article-more">
				<!--上一篇 下一篇-->
				<section id="article-side">
					<div class="pure-g">
						<div class="pure-u-1-2"><span>上一篇：</span><a href="last">【公告】七牛云宣布华南机房存储空间降价，降幅达 10%</a></div>
						<div class="pure-u-1-2"><span>下一篇：</span><a href="next">Hi, Siri! 个趟 WWDC 结棍伐? </a></div>
					</div>
				</section>
			</div>
		</div>
		</div>


	</div>
</div>






<!-- <aside id="web-aside-contact">
	<div class="container">
    	<h3 class="center">即刻联系，了解我们更多 解决方案 及 套餐优惠 。</h3>
    	<div class="center"><a class="pure-button btn-hollow more" href="#">腾飞    一触即发</a></div>
		
	</div>
</aside> -->


<footer>
	<div id="footer-a">
		<div class="container pure-g">
			<div class="pure-u-lg-1-6 footer-aboutus">
				<h4>关于我们</h4>
				<ul>
					<li><a href="#">关于飞健</a></li>
					<li><a href="#">合作联系</a></li>
					<li><a href="#">加入我们</a></li>
					<li><a href="#">品牌形象</a></li>
				</ul>
			</div>
			<div class="pure-u-lg-5-12">
				<h4>产品服务</h4>
			</div>
			<div class="pure-u-lg-1-4 footer-contact">
				<h4>联系我们</h4>
				<p class="tel">咨询电话：185 - 7439 - 9336</p>
				<p class="tel"></p>
				<p class="addr">湖南省 长沙市 </p>
			</div>
			<div class="pure-u-lg-1-6">
				<div class="footer-code">
					<div class="qrcode"></div>
					<h5>微信获取动态</h5>
				</div>
			</div>
		</div>
	</div>
	<div id="footer-b">
		<div class="container pure-g">
			<div class="pure-u-xl-2-3">
			    <p class="web-op-info">©2017 东莞市飞健实业有限公司</p>
			    <p class="web-copyright">沪 ICP 备 11037377 号-5</p>
			</div>
			<div class="pure-u-xl-1-3">
				<ul class="web-footer-more">
					<p>Tuduweb.com</p>
				</ul>
			</div>
		</div>
	</div>
</footer>

<script src="/statics/js/jquery-1.12.4.js"></script>
<script src="/statics/js/jquery.SuperSlide.2.1.2.source.js"></script>
<script src="/statics/js/v1.js"></script>
<script type="text/javascript">
	$(".fullSlide").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"fold",  autoPlay:true, autoPage:true, trigger:"click",interTime:"5000",switchLoad:"data-src"});

	/* 特效 */
	$('.box-block').find('li').hover(function(){
		$(this).addClass('on');
	},function(){
		$(this).removeClass('on');
	});

</script>
</body>
</html>